<template>
  <div class="addKeyanPage">
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>项目规划</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/tongchou/ZCQxiangmuList' }">中长期项目库管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{id?'编辑':'新增'}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="addContainer">
      <h3 class="title">
        <i></i>
        项目基本信息
      </h3>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="150px"
        class="addForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="项目名称"
              prop="projectName"
            >
              <el-input v-model="ruleForm.projectName" placeholder="请输入项目名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="项目编号"
              prop="projectNo"
            >
              <el-input v-model="ruleForm.projectNo" placeholder="请输入项目编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="项目编码"
              prop="uniqueCityCode"
            >
              <el-input
                placeholder="请输入项目编码"
                v-model="ruleForm.uniqueCityCode"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="项目总投资"
              prop="totalProjectInvestment"
            >
              <el-input
                placeholder="单位为万元"
                v-model="ruleForm.totalProjectInvestment"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="项目类型"
              prop="projectCategoryCode"
            >
              <el-select
                v-model="ruleForm.projectCategoryCode"
                placeholder="请选择项目类型"
              >
                <el-option v-for="item in projectArr" :label="item.label" :value="item.id" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="建设地点"
              prop="constructionSite"
            >
              <el-input v-model="ruleForm.constructionSite" placeholder="下拉选择省市县/区"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="计划开始时间"
              prop="planBeginTime"
            >
              <el-date-picker
                v-model="ruleForm.planBeginTime"
                align="right"
                type="date"
                placeholder="请选择开始时间"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="所属单位"
              prop="belongUnitName"
            >
              <el-select
                v-model="ruleForm.belongUnitName"
                placeholder="请选择编制单位"
              >
                <el-option
                  label="民政局"
                  value="1"
                ></el-option>
                <el-option
                  label="公安局"
                  value="2"
                ></el-option>
                <el-option
                  label="财政局"
                  value="3"
                ></el-option>
                <el-option
                  label="国税局"
                  value="4"
                ></el-option>
                <el-option
                  label="土地局"
                  value="5"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="联系人"
              prop="projectContact"
            >
              <el-input
                placeholder="请输入联系人"
                v-model="ruleForm.projectContact"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="计划截止时间"
              prop="planEndTime"
            >
              <el-date-picker
                v-model="ruleForm.planEndTime"
                align="right"
                type="date"
                placeholder="请选择截止时间"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="项目联系人邮箱"
              prop="projectContactEmail"
            >
              <el-input
                placeholder="请输入项目联系人邮箱"
                v-model="ruleForm.projectContactEmail"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="项目联系人电话"
              prop="projectContactMobile"
            >
              <el-input
                placeholder="请输入项目联系人电话"
                v-model="ruleForm.projectContactMobile"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="国标行业编码"
              prop="industryCoding"
            >
              <el-input
                placeholder="请输入国标行业编码"
                v-model="ruleForm.industryCoding"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="国标行业名称"
              prop="industryName"
            >
              <el-input
                placeholder="请输入国标行业名称"
                v-model="ruleForm.industryName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="是否开发区项目"
              prop="isDevelopment"
            >
              <el-select v-model="ruleForm.isDevelopment" placeholder="请选择是否是开发区项目">
                <el-option v-for="(item) in optionArr" :label="item.label" :value="item.id" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="开发区名称"
              prop="developmentName"
            >
              <el-input
                placeholder="请输入开发区名称"
                v-model="ruleForm.developmentName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="产业结构编码"
              prop="industrialStructureCode"
            >
              <el-input
                placeholder="请选择产业结构编码"
                v-model="ruleForm.industrialStructureCode"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="产业结构名称"
              prop="industrialStructureName"
            >
              <el-input
                placeholder="请输入产业结构名称"
                v-model="ruleForm.industrialStructureName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="行政区划编码"
              prop="administrativeDivisionCode"
            >
              <el-input
                placeholder="请选择行政区划编码"
                v-model="ruleForm.administrativeDivisionCode"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="行政区划名称"
              prop="administrativeDivisionName"
            >
              <el-input
                placeholder="请输入行政区划名称"
                v-model="ruleForm.administrativeDivisionName"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item
              label="工程分类编码"
              prop="projectClassificationCode"
            >
              <el-input
                placeholder="请选择工程分类编码"
                v-model="ruleForm.projectClassificationCode"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="工程分类名称"
              prop="projectClassificationName"
            >
              <el-input
                placeholder="请输入工程分类名称"
                v-model="ruleForm.projectClassificationName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="立项类型编码"
              prop="approvalTypeCode"
            >
              <el-input
                placeholder="请选择立项类型编码"
                v-model="ruleForm.approvalTypeCode"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="立项类型名称"
              prop="approvalTypeName"
            >
              <el-input
                placeholder="请输入立项类型名称"
                v-model="ruleForm.approvalTypeName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="项目资金属性编码"
              prop="fundAttributeCode"
            >
              <el-input
                placeholder="请选择项目资金属性编码"
                v-model="ruleForm.fundAttributeCode"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="项目资金属性名称"
              prop="fundAttributeName"
            >
              <el-input
                placeholder="请输入项目资金属性名称"
                v-model="ruleForm.fundAttributeName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="项目建设性质编码"
              prop="constructionNatureCode"
            >
              <el-input
                placeholder="项目建设性质编码"
                v-model="ruleForm.constructionNatureCode"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="项目建设性质名称"
              prop="constructionNatureName"
            >
              <el-input
                placeholder="项目建设性质名称"
                v-model="ruleForm.constructionNatureName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="项目类别编码"
              prop="itemCategoryCode"
            >
              <el-input
                placeholder="项目类别编码"
                v-model="ruleForm.itemCategoryCode"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="项目类别名称"
              prop="itemCategoryName"
            >
              <el-input
                placeholder="项目类别名称"
                v-model="ruleForm.itemCategoryName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col
            :span="24"
            class="fileList"
          >
            <el-form-item
              label="附件"
              prop="name"
            >
              <el-upload
                name="multipartFiles"
                class="upload-demo"
                :action="$config.API_URL + '/file/upload'"
                :on-change="handleChange"
                :file-list="fileList"
                :limit="1"
                :before-remove="removeFile"
              >
                <div class="uploadBox">
                  <i class="el-icon-plus"></i>
                  <span>上传附件</span>
                </div>
                <div
                  slot="tip"
                  class="el-upload__tip"
                >只能上传jpg/png/word/pdf/zip/excle/ppt格式文件，文件不能超过50MB</div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="建设内容"
              prop="remark"
            >
              <el-input
                :rows="3"
                type="textarea"
                placeholder="请输入内容"
                v-model="ruleForm.remark"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="operateBtn">
      <el-button
        type="primary"
        @click="submitForm('ruleForm', 2)"
      >提交</el-button>
      <el-button
        plain
        @click="submitForm('ruleForm', 1)"
      >保存</el-button>
      <el-button
        plain
        @click="cancel"
      >取消</el-button>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
  export default {
    name: 'addkeyan',
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          }]
        },
        // 是否开发区项目数据
        optionArr: [{
          label: '是',
          id: 1
        },{
          label: '否',
          id: 2
        }],
        // 项目类型数据
        projectArr: [
          {
            label: '全市发展规划',
            id: 1
          },
          {
            label: '专项发展规划',
            id: 2
          },
          {
            label: '软件开发',
            id: 3
          },
          {
            label: '系统集成',
            id: 4
          },
          {
            label: '民政局',
            id: 5
          },
          {
            label: '公安局',
            id: 6
          },
          {
            label: '财政局',
            id: 7
          },
          {
            label: '国税局',
            id: 8
          },
          {
            label: '土地局',
            id: 9
          }
        ],
        ruleForm: { //添加参数
          currentState: '',//添加状态
          projectName: "", //项目名称
          projectNo: '', //项目编号
          uniqueCityCode: '', //项目编码
          totalProjectInvestment: '', //总投资
          projectCategoryCode: '', //项目类型
          constructionSite: '',//建设地点
          planBeginTime: '',//计划开始时间
          belongUnitName: '',//所属单位
          projectContact: '',//联系人
          planEndTime: '',//计划截止时间
          projectContactEmail: '',//联系人邮箱
          projectContactMobile: '',//联系人电话
          industryCoding: '',//国际行业编码
          industryName: '',//国标行业名称
          isDevelopment: '',//是否开发区项目
          developmentName: '',//开发区名称
          industrialStructureCode: 'PrjIndustry',//产业结构编码
          industrialStructureName: '',// 产业结构名称
          administrativeDivisionCode: 'PrjIndustry',//行政区划编码
          administrativeDivisionName: '',//行政区划名称
          projectClassificationCode: 'PrjIndustry',//工程分类编码
          projectClassificationName: '',//工程分类名称
          approvalTypeCode: 'PrjIndustry',//立项类型编码
          approvalTypeName: '',//立项类型名称
          fundAttributeCode: 'PrjIndustry',//项目资金属性编码
          fundAttributeName: '',//项目资金属性名称
          constructionNatureCode: 'PrjIndustry',//项目建设性质编码
          constructionNatureName: '',//项目建设性质名称
          itemCategoryCode: 'PrjIndustry',//项目类别编码
          itemCategoryName: '',//项目类别名称
          remark: '',// 备注
          isDelete: 1
        },
        attachmentId: null,
        oneAttachmentId: null,
        rules: {
          projectName: [{
            required: true,
            message: "请输入项目名称",
            trigger: "blur"
          }],
          projectNo: [{
            required: true,
            message: "请输入项目编号",
            trigger: "blur"
          }],
          uniqueCityCode: [{
            required: true,
            message: "请输入项目编码",
            trigger: "blur"
          }],
          totalProjectInvestment: [{
            required: true,
            message: "请输入总投资",
            trigger: "blur"
          }],
          projectCategoryCode: [{
            required: true,
            message: "请输入项目类型",
            trigger: "blur"
          }],
          constructionSite: [{
            required: true,
            message: "建设地点",
            trigger: "blur"
          }],
          planBeginTime: [{
            required: true,
            message: "计划开始时间",
            trigger: "blur"
          }],
          belongUnitName: [{
            required: true,
            message: "所属单位",
            trigger: "blur"
          }],
          projectContact: [{
            required: true,
            message: "联系人",
            trigger: "blur"
          }],
          planEndTime: [{
            required: true,
            message: "计划截止时间",
            trigger: "blur"
          }],
          projectContactEmail: [{
            required: true,
            message: "联系人邮箱",
            trigger: "blur"
          }],
          projectContactMobile: [{
            required: true,
            message: "联系人电话",
            trigger: "blur"
          }],
          industryCoding: [{
            required: true,
            message: "国际行业编码",
            trigger: "blur"
          }],
          industryName: [{
            required: true,
            message: "国标行业名称",
            trigger: "blur"
          }],
          isDevelopment: [{
            required: true,
            message: "是否开发区项目",
            trigger: "blur"
          }],
          developmentName: [{
            required: true,
            message: "开发区名称",
            trigger: "blur"
          }],
          industrialStructureCode: [{
            required: true,
            message: "产业结构编码",
            trigger: "change"
          }],
          industrialStructureName: [{
            required: true,
            message: "产业结构名称",
            trigger: "change"
          }],
          administrativeDivisionCode: [{
            required: true,
            message: "行政区划编码",
            trigger: "blur"
          }],
          administrativeDivisionName: [{
            required: true,
            message: "行政区划名称",
            trigger: "blur"
          }],
          projectClassificationCode: [{
            required: true,
            message: "工程分类编码",
            trigger: "blur"
          }],
          projectClassificationName: [{
            required: true,
            message: "工程分类名称",
            trigger: "blur"
          }],
          approvalTypeCode: [{
            required: true,
            message: "立项类型编码",
            trigger: "blur"
          }],
          approvalTypeName: [{
            required: true,
            message: "立项类型名称",
            trigger: "blur"
          }],
          fundAttributeCode: [{
            required: true,
            message: "项目资金属性编码",
            trigger: "blur"
          }],
          fundAttributeName: [{
            required: true,
            message: "项目资金属性名称",
            trigger: "blur"
          }],
          constructionNatureCode: [{
            required: true,
            message: "项目建设性质编码",
            trigger: "blur"
          }],
          constructionNatureName: [{
            required: true,
            message: "项目建设性质名称",
            trigger: "blur"
          }],
          itemCategoryCode: [{
            required: true,
            message: "项目类别编码",
            trigger: "blur"
          }],
          itemCategoryName: [{
            required: true,
            message: "项目类别名称",
            trigger: "blur"
          }]
        },
        fileList: [],
        fileOneList: [],
        isShowUserDialog: false,
        peopleList: []
      };
    },
    computed: {
      id () {
        return this.$route.query.id // 判断是编辑还是新增
      }
    },
    mounted() {
      if (this.id) {
        this.getDetail()
      }
    },
    methods: {
      // 回显数据
      getDetail () {
        this.axios
          .get("/mediumLongTermpm/getOne", { params: { id: this.id } })
          .then(res => {
            if (res.code !== 1000) {
              this.$message.error(res.message)
              return
            }
            console.log(res,'res')
            // if (res.data.isDevelopment == 1) this.ruleForm.isDevelopment = '是'
            this.ruleForm = res.data
          })
      },
      // 新增中长期
      ajaxGetPeople () {
        this.axios.post('/mediumLongTermpm/insert', this.ruleForm).then(res => {
          if (res.code !== 1000) {
            this.$message.error(res.message)
            return
          }
          this.$message.success(res.message)
          this.$router.go(-1)
        }).finally(() => {
        })
      },
      // 编辑中长期
      updateItem () {
        let projectId = this.id
        this.axios.post('/mediumLongTermpm/update',{...this.ruleForm,projectId:projectId}).then(res=>{
          if (res.code !== 1000) {
            this.$message.error(res.message)
            return
          }
          this.$message.success(res.message)
          this.$router.go(-1)
        })
      },
      removeOneFile(file) {
        this.oneAttachmentId = null
      },
      removeFile(file) {
      	this.attachmentId = null
      },
      // 选中数据
      handleSelect(item) {
        item.mediumlongProjectId = item.projectId
        delete item.projectId
        this.ruleForm = item
      },
      // 提交
      submitForm(formName, status) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.ruleForm.planBeginTime = this.ruleForm.planBeginTime + '00:00:00'
            this.ruleForm.planEndTime = this.ruleForm.planEndTime + '00:00:00'
            if (status == 2) {
              this.ruleForm.currentState = status
            } else {
              this.ruleForm.currentState = 1
            }
            if (this.id) {
              console.log('编辑')
              this.updateItem();
            } else {
              console.log('新增')
              this.ajaxGetPeople()
            }
          } else {
            this.$message.error("请填写带*的必填项！");
            return false;
          }
        });
      },
      ajaxSubmit (status) {
        this.ruleForm.type = 1
        if (status == 2) {
          this.ruleForm.nextUserId = this.nextUserId
        }
        this.ruleForm.currentState = status
        if (this.attachmentId || this.oneAttachmentId) {
          let attachmentId = []
          if (this.attachmentId) {
            attachmentId.push({
              name: '附件',
              id: this.attachmentId
            })
          }
        }
        this.axios.post('/mediumLongTermpm/insert', this.ruleForm).then(res => {
          if (res.code !== 1000) {
            this.$message.error(res.message)
            return
          }
          this.$emit('success')
          this.$message({
            type: 'success',
            message: '保存成功'
          })
          this.$router.replace({
            name: 'ZCQxiangmuList'
          })
        })
      },
      cancel() {
        this.$router.replace({
          name: 'ZCQxiangmuList'
        })
      },
      handleChange(file, fileList) {
        if (file.response) {
          this.attachmentId = file.response.data.attachmentId
        }
      },
      handleOneChange(file, fileList) {
        if (file.response) {
          this.oneAttachmentId = file.response.data.attachmentId
        }
      }
    }
  };
</script>
<style lang="less" scoped>
.addKeyanPage {
  .addContainer {
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;

    .addForm {
      .el-row {
        border: 1px solid rgba(238, 238, 238, 1);
        border-bottom: none;

        .el-col {
          border-bottom: 1px solid rgba(238, 238, 238, 1);
        }
      }

      .el-select,
      .el-input {
        width: 100%;
      }
    }

    .title {
      font-size: 18px;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      i {
        width: 4px;
        height: 16px;
        display: inline-block;
        background-color: #4967cf;
        margin-right: 6px;
      }
    }
  }

  .operateBtn {
    text-align: center;
    padding-top: 30px;

    .el-button--small {
      padding: 9px 30px;
    }
  }

  .fileList {
    .uploadBox {
      width: 124px;
      height: 58px;
      border-radius: 4px;
      border: 2px dashed rgba(160, 179, 244, 1);
      display: flex;
      flex-direction: column;

      .el-icon-plus {
        font-size: 26px;
        color: #4967cf;
      }
    }

    .upload-demo {
      padding: 11px 16px;
      width: 500px;
    }
  }
}
</style>
<style lang="less">
.addKeyanPage {
  .addForm {
    .el-form-item {
      margin-bottom: 0;
    }

    .el-input {
      height: 40px;
      line-height: 40px;
    }

    .el-input__inner,
    .el-textarea__inner {
      border: none !important;
    }

    .el-form-item__label {
      background-color: #fafafa;
      min-height: 40px;
      line-height: 40px;
    }

    .el-form-item__error {
      display: none;
    }
  }
}
</style>
